<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>借阅书籍</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>

    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<%
    if (session.getAttribute("reader") == null) {
        response.sendRedirect("index.jsp");
    }
%>
<body>
<blockquote class="layui-elem-quote">借阅书籍</blockquote>

<div class="layui-container">
    <div class="layui-row">
        搜索图书：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn s" data-type="reload">搜索</button>
        <button class="layui-btn" style="float: right" onclick="window.location='/borrowBooksDetail.jsp'">返回个人中心
        </button>
    </div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <table id="demo" lay-filter="test"></table>
        </div>

    </div>
</div>


<%--table--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="borrow">借阅</a>
</script>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        const table = layui.table;
        const layer = layui.layer;

        //表格start
        table.render({
            elem: "#demo",
            height: 530,
            url: "/ShowBooksServlet?state=showBorrow", //数据接口
            method: 'POST',
            page: true, //开启分页
            cols: [
                [
                    //表头
                    {field: "name", title: "图书名", width: 200},
                    {field: "price", title: "价格", width: 100},
                    {field: "writer", title: "作者", width: 100},
                    {field: "classify", title: "分类", width: 100},
                    {field: "state", title: "借阅状态", width: 400},
                    {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#barDemo",
                        width: 80,
                    },
                ]
            ],
            id: 'testReload'
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.layui-row .s').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听行工具事件
        table.on("tool(test)", function (obj) {
            if (obj.event === "borrow") {
                layer.confirm("要借阅么", function (index) {
                    const id = obj.data.id;

                    $.ajax({
                        url: "/updateBookBorrow?id=" + id + "&state=borrow",
                        type: "POST",
                        success: function (msg) {
                            if (msg) {
                                obj.del();
                                layer.msg("借阅成功", {icon: 6});
                            } else {
                                layer.msg("借阅失败", {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg("借阅失败", {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>
